<template>
  <div class="mod-study__event">
    <title-bar title="活动信息" />
    <div class="info-table">
      <div class="info-table-item">
        <div class="info-table-item-label">研学活动名称</div>
        <div class="info-table-item-value">{{ info.eventInfo.name }}</div>
      </div>
      <!-- <div class="info-table-item">
        <div class="info-table-item-label">账号名</div>
        <div class="info-table-item-value">{{ info.eventInfo.leaderUsername }}</div>
      </div> -->
      <div class="info-table-item">
        <div class="info-table-item-label">带队人姓名</div>
        <div class="info-table-item-value">{{ info.eventInfo.leaderName }}</div>
      </div>
      <div class="info-table-item">
        <div class="info-table-item-label">带队人联系电话</div>
        <div class="info-table-item-value">{{ info.eventInfo.leaderTel }}</div>
      </div>
      <!-- <div class="info-table-item">
        <div class="info-table-item-label">带队人身份信息</div>
        <div class="info-table-item-value">{{ info.eventInfo.leaderIdCard }}</div>
      </div> -->
    </div>
    <title-bar title="结营确认" style="margin-top: 30px;" />
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-popconfirm width="220" icon-color="#626AEF" title="确定结营?" @confirm="completeHandle">
          <template #reference>
            <el-button type="primary" :disabled="!state.dataListSelections?.length">结营</el-button>
          </template>
          <template #actions="{ confirm, cancel }">
            <el-button size="small" @click="cancel">取消</el-button>
            <el-button type="danger" size="small" @click="confirm">
              确认
            </el-button>
          </template>
        </el-popconfirm>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList"
      @selection-change="state.dataListSelectionChangeHandle" @sort-change="state.dataListSortChangeHandle" row-key="id"
      border style="width: 100%">
      <el-table-column type="selection" :selectable="selectable" label="选择" header-align="center" align="center"
        width="80"></el-table-column>
      <el-table-column prop="name" label="结营人员" header-align="center"></el-table-column>
      <el-table-column prop="idCard" label="身份信息" header-align="center"></el-table-column>
      <el-table-column prop="completeStatusText" label="结营状态" header-align="center">
        <template v-slot="scope">
          <div :class="[scope.row.completeStatusText === '待结营' ? 'status-nocheck' : 'status-check']">{{
          scope.row.completeStatusText }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer-btn" style="position: fixed; right:40px;
    bottom: 40px;">
      <el-button @click="back()">返回</el-button>
      <el-popconfirm width="220" icon-color="#626AEF" title="确定活动结营？" @confirm="finishCheck" v-if="completeStatusText==='待结营'">
        <template #reference>
          <el-button type="primary" v-if="info.status !== 'END'">活动结营</el-button>
        </template>
        <template #actions="{ confirm, cancel }">
          <el-button size="small" @click="cancel">取消</el-button>
          <el-button type="danger" size="small" @click="confirm">
            确认
          </el-button>
        </template>
      </el-popconfirm>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs } from "vue";
import useView from "@/hooks/useView";
import { studyTypeList, studyStatusList } from "@/constants/config";
import TitleBar from "@/components/base/title-bar/index";
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

const eventId = route.query.eventId;
const completeStatusText = route.query.completeStatusText;
const info = ref<any>();

const view = reactive({
  getDataListURL: "/study/student/event/person/page",
  getDataListIsPage: true,
  dataForm: {
    eventId,
    completePageFlag: true,
  },
});

const state = reactive({ ...useView(view), ...toRefs(view) });
const selectable = (row: any) => row.completeStatusText === '待结营';

// 获取活动详情
const getInfo = () => {
  baseService.get('/study/student/event/info', { eventId }).then((res) => {
    info.value = res.data;
  });
};
getInfo();

const completeHandle = () => {
  baseService.post('/study/student/event/student/complete', { eventId, studentIds: state.dataListSelections?.map((d) => d.studentId) }).then((res) => {
    ElMessage.success({
      message: "结营成功",
      duration: 500,
      onClose: () => {
        state.getDataList();
      }
    });
  });
};

const finishCheck = () => {
  baseService.post('/study/student/event/event/complete', { eventId }).then((res) => {
    ElMessage.success({
      message: "结营成功",
      duration: 500,
      onClose: () => {
        back();
      }
    });
  });
};

const back = () => {
  router.go(-1);
};
</script>
